<template>
  <div class='month-carbon-container'>
    <div class='month-carbon-header' :style='"height:" + headerHeight'>
      <div class='title'>
        月度碳排
      </div>
    </div>
    <bar :loading='loading' id='month-carbon-container' :height='`calc(100% - ${headerHeight})`' :xData='xData'
         :yData='yData' />
  </div>
</template>

<script>
import Bar from '@/business-components/charts/bar.vue'

export default {
  components: { Bar },
  data() {
    return {
      options: {},
      xData: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月'
      ],
      headerHeight: '40px',
      queryParam: {
        type: '0'
      },
      loading: false,
      yData: [
        200,
        150,
        140,
        160,
        130,
        120,
        190
      ]
    }
  },
  methods: {
    getData() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang='less' scoped>
.month-carbon-container {
  width: 100%;
  height: 100%;

  .month-carbon-header {
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: 800;
      color: #1A1A1A;
    }
  }
}
</style>